<template>
  <view class="template-circle tn-safe-area-inset-bottom">
	  
	  <!-- 顶部自定义导航 -->
	<tn-nav-bar fixed :bottomShadow="false">爱心捐赠</tn-nav-bar>
	  
    <view class="ranking-page">
      <!-- 滚动感谢语（-->
      <view class="scroll-thanks">
        <view class="thanks-content" :style="{ animationDuration: scrollTime + 's' }">
          <text class="thanks-item" v-for="(msg, index) in shuffledThanks" :key="index">
            {{ msg }} &nbsp;&nbsp;&nbsp;&nbsp;
          </text>
        </view>
      </view>
  
      <!-- 排行榜列表 -->
      <view class="ranking-container">
        <!-- 前三名 -->
        <view class="top-ranks">
          <view class="rank-item rank-1" v-for="(item, index) in topThree" :key="index">
            <view class="rank-num">{{ index + 1 }}</view>
            <view class="avatar">
              <image :src="item.avatar" mode="aspectFill"></image>
            </view>
            <view class="donor-name">{{ item.name }}</view>
            <view class="donor-times">累计捐赠 {{ item.times }} 次</view>
            <view class="donor-amount">¥{{ item.amount.toLocaleString() }}</view>
          </view>
        </view>
  
        <!-- 其他排名 -->
        <view class="normal-ranks">
          <view class="normal-rank-item" v-for="(item, index) in otherRanks" :key="index">
            <view class="rank-num">{{ index + 4 }}</view>
            <view class="avatar">
              <image :src="item.avatar" mode="aspectFill"></image>
            </view>
            <view class="donor-info">
              <view class="donor-name">{{ item.name }}</view>
              <view class="donor-times">累计捐赠 {{ item.times }} 次</view>
            </view>
            <view class="donor-amount">¥{{ item.amount.toLocaleString() }}</view>
          </view>
        </view>
      </view>
  
      <!-- 捐赠按钮 -->
      <view class="donate-btn-wrap">
        <button class="donate-btn" @click="goToDonation">我要捐赠</button>
      </view>
    </view>

  </view>
</template>
<script>

	
 
export default {
  data(){
    return {
      scrollTime: 25,
      baseThanks: [
        "感谢王公益的爱心捐赠，您的善举温暖了无数人",
        "感谢李爱心的爱心捐赠，您的善意让世界更美好",
        "感谢张奉献的爱心捐赠，您的付出传递了希望",
        "感谢赵慈善的爱心捐赠，您的行动诠释了大爱",
        "感谢孙友爱的爱心捐赠，您的支持意义非凡",
        "感谢周互助的爱心捐赠，您的善良值得被铭记",
        "感谢吴奉献的爱心捐赠，您的慷慨带来了力量",
        "感谢郑公益的爱心捐赠，您的温暖照亮了前路"
      ],
      shuffledThanks: [],
      topThree: [
        { name: "王公益", avatar: "/static/avatar/1.png", times: 25, amount: 15200 },
        { name: "李爱心", avatar: "/static/avatar/2.png", times: 12, amount: 8600 },
        { name: "张奉献", avatar: "/static/avatar/3.png", times: 8, amount: 6800 }
      ],
      otherRanks: [
        { name: "赵慈善", avatar: "/static/avatar/4.png", times: 6, amount: 5200 },
        { name: "孙友爱", avatar: "/static/avatar/5.png", times: 5, amount: 4800 },
        { name: "周互助", avatar: "/static/avatar/6.png", times: 4, amount: 4200 },
        { name: "吴奉献", avatar: "/static/avatar/7.png", times: 3, amount: 3600 },
        { name: "郑公益", avatar: "/static/avatar/8.png", times: 3, amount: 3200 }
      ]
    };
  },
  created() {
    this.shuffleThanks();
    setInterval(() => this.shuffleThanks(), this.scrollTime * 1000);
  },
  methods: {
    shuffleThanks() {
      const temp = [...this.baseThanks];
      for (let i = temp.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [temp[i], temp[j]] = [temp[j], temp[i]];

      }
      this.shuffledThanks = temp;
    },

    goToDonation() {
      uni.navigateTo({
        url: '/minePages/donation' // 对应minePages分包下的donation页面
      });
    }
  }
};
</script>

<style scoped>
/* 关键修改：增加 padding-top 给顶部留距离 */
.ranking-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-top: 20rpx; /* 顶部距离，可根据需求调整数值（ */
}

/* 滚动感谢语 */
.scroll-thanks {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  color: #fff;
  height: 60rpx;
  line-height: 60rpx;
  overflow: hidden;
  position: relative;
}

.thanks-content {
  white-space: nowrap;
  animation: scroll-left linear infinite;
  display: flex;
  align-items: center;
  height: 100%;
}

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.thanks-item {
  margin: 0 30rpx;
  font-size: 26rpx;
}


.top-ranks {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0 30rpx;
  padding: 0 30rpx;
}

.top-ranks .rank-item {
  width: 30%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.rank-1 .rank-num { background-color: #ffd700; color: #fff; }
.rank-2 .rank-num { background-color: #c0c4cc; color: #fff; }
.rank-3 .rank-num { background-color: #cd853f; color: #fff; }

.top-ranks .rank-num {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 50%;
  font-size: 24rpx;
  font-weight: bold;
  margin: 0 auto 16rpx;
}

.top-ranks .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 auto 16rpx;
  overflow: hidden;
  border: 2rpx solid #f0f0f0;
}

.top-ranks .avatar image {
  width: 100%;
  height: 100%;
}

.top-ranks .donor-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.top-ranks .donor-times {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.top-ranks .donor-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff5252;
}

.normal-ranks {
  padding: 0 30rpx;
}

.normal-rank-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.normal-rank-item .rank-num {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: bold;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #888;
  margin-right: 20rpx;
}

.normal-rank-item .avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  overflow: hidden;
  border: 2rpx solid #f0f0f0;
}

.normal-rank-item .avatar image {
  width: 100%;
  height: 100%;
}

.donor-info {
  flex: 1;
}

.normal-rank-item .donor-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
  display: block;
}

.normal-rank-item .donor-times {
  font-size: 22rpx;
  color: #999;
  display: block;
}

.normal-rank-item .donor-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.donate-btn-wrap {
  padding: 40rpx 30rpx;
}

.donate-btn {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  color: #fff;
  border-radius: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  box-shadow: 0 6rpx 16rpx rgba(255, 126, 95, 0.3);
}
</style>